<template>
  <div class="dsq-form">
    <el-form label-width="100px">
      <div class="header">
        <slot name="header"></slot>
      </div>
      <el-row style="padding: 20px">
        <template v-for="item in formItems" :key="item.label">
          <el-col v-bind="colLayout">
            <template v-if="item.itemType === 'input'">
              <el-form-item :label="item.label" v-if="!item.isHidden">
                <el-input
                  :placeholder="item.placeholder"
                  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleContentChange($event, item.field)"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else-if="item.itemType === 'password'">
              <el-form-item :label="item.label" v-if="!item.isHidden">
                <el-input
                  :placeholder="item.placeholder"
                  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleContentChange($event, item.field)"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else-if="item.itemType === 'select'">
              <el-form-item :label="item.label" v-if="!item.isHidden">
                <el-select
                  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleContentChange($event, item.field)"
                >
                  <el-option
                    v-for="subitem in item.options"
                    :key="subitem.value"
                    :value="subitem.value"
                  >
                    {{ subitem.title }}
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else-if="item.itemType === 'datePicker'">
              <el-form-item :label="item.label" v-if="!item.isHidden">
                <el-date-picker
                  v-bind="item.otherOptions"
                  class="datePicker"
                  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleContentChange($event, item.field)"
                ></el-date-picker>
              </el-form-item>
            </template>
          </el-col>
        </template>
      </el-row>
      <div class="footer">
        <slot name="search"> </slot>
        <slot name="remake"> </slot>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {
  defineProps,
  withDefaults,
  ref,
  computed,
  watch,
  defineEmits
} from 'vue';
import type { IFormType } from '../index';
const props = withDefaults(
  defineProps<{
    formItems: IFormType[];
    colLayout?: any;
    modelValue: any;
  }>(),
  {
    colLayout: () => {
      return {
        xl: 6, //1920分辨率的屏幕里面一行显示4个
        lg: 8, //1920分辨率的屏幕里面一行显示2个
        md: 12,
        sm: 24,
        xs: 24
      };
    }
  }
);
const emit = defineEmits(['update:modelValue']);
const handleContentChange = (value: any, field: string) => {
  emit('update:modelValue', { ...props.modelValue, [field]: value });
};
</script>

<style scoped lang="less">
.dsq-form {
  .el-form {
    // position: relative;
    padding-top: 20px;
    .el-form-item {
      // background-color: pink;
      align-items: center;
      .el-select {
        width: 100%;
      }
      /deep/ .el-form-item__content {
        line-height: 0px;
      }
      /deep/ .el-date-editor {
        width: 100%;
      }
      /deep/ .el-range__icon {
        height: unset;
      }
    }
    .footer {
      text-align: right;
      // position: absolute;
      // right: 20px;
      // bottom: 10px;
      margin-right: 30px;
      margin-bottom: 10px;
    }
  }
}
</style>
